.container{margin: 0 auto; width: 960px;}
.header{height: 200px;}
.header_left{float: left; width: 100px; height: 200px;}
.header_right{float: right; width: 860px; height: 200px; position: relative;}
.logo{float:left; width: 100px; height: 100px; background-image: url(logo.png);}
.status{float: left; width: 42px; height: 32px; text-align: right;}
.banner{
	position: absolute;
	width: 860px;
	height: 120px;
	box-shadow: inset 0px 0px 5px #555;
	border-radius: 4px;
	overflow: hidden;
}
.banner>a>img{border-radius:4px;}
img.img_s{position: absolute; z-index: -1;}
.banner_detail{
	position: absolute;
	right: 0;
	bottom: -3px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #FD2;
	text-shadow: 0px 1px 1px #929292;
	width: 640px;
	padding-top: 4px;
}
.banner_logo{position: absolute; top: 42px; left: 100px; width: 120px;}
.banner_img{width: 120px; height: 120px;}
.banner_img .image_wrap{
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	-webkit-box-shadow: 0 0 5px #555;
	-moz-box-shadow: 0 0 5px #555;
	box-shadow: 0 0 5px #555;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.banner_img .image_wrap:hover {
	-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
	-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
	box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}
.banner_ok{
	color: #96C;
	width: 120px;
	white-space: nowrap;
	overflow: hidden;
	padding-top: 5px;
}
.banner_ok>span{display: block; text-indent: 18px;}
.banner_like{background: url(icon/ok.png) no-repeat scroll left center;}
.banner_posts{background: url(icon/posts.png) no-repeat scroll left center;}
.banner_info1{
	float: left;
	width: 240px;
	height: 80px;
	padding-left: 5px;
}
.banner_info2{
	float: left;
	width: 360px;
	height: 80px;
}
.banner_location{
	float: left;
	width: 115px;
	height: 80px;
	margin-left: 5px;
	background-color: rgba(0,105,149,.1);
	border-radius: 4px;
}
.content{float: left; width: 960px; min-height: 960px; padding-top: 8px;}
.footer{clear: both; height: 80px;}
a{text-decoration: none; outline: none; color: #126E98;}
a:hover{cursor: pointer; text-decoration: underline;}
a img {border: none;}
img{ border-radius: 4px 4px 4px 4px;}
/*Login*/
.login_container{margin: 0 auto; width: 960px; min-height:600px;}
.login_header{height: 100px;}
.login_header input{margin-left: 3px; margin-right: 2px;}
.login{float:right; margin: 10px 12px 0 0; width: 450px;}
.login_div{float: left; width: 225px;}
.login_div>a{margin-left: 5px; line-height: 20px;}
.login_content{clear: both; float: left; padding:0 10px 20px 10px; border: 1px solid #FFFFFF; border-radius: 8px; box-shadow: 0 0 4px #666;}
.login_left{float: left; width: 460px;}
.login_right{float: right; width: 460px;}
.login_main{width: 100%; min-height: 100px;}
.login_main>h2{color: #FC3; text-shadow: 0 1px 1px #929292; margin: 50px 5px 0 0;}
.login_form{padding: 3px 5px; border-top: 3px double #0A9; border-bottom: 3px double #0A9;}
#create table tr th{color: #669; text-align:right;}
#create table tr td{padding-top: 4px;}
#create input[type=text], #create input[type=password]{width: 250px !important;}
/*Tab*/
.can{margin-top: -10px;}
.tab_div{float: left; position: fixed; width: 100px; margin-top: 5px;}
.tab_ul {display: block; padding: 0;}
.tab_li {list-style: none; margin-bottom: -10px;}
.tab_li a {display: block; color: #FC0; text-align: center; text-shadow: 0px 1px 1px #666; font-size: 16px;  font-family:"Comic Sans MS", cursive;}
.tab_li a:hover {color: #0080C0;}
.tab_li.active {background: url(arrow.png) no-repeat right;}
.tab_li a.active {font-weight: bold; color: #0080C0;}
.panel {float: right; width: 860px; min-height: 1000px; background-image:url(page.png); border-radius: 4px; padding-bottom: 10px;}

.etabs {
	margin: 0;
	padding: 0;
	border-radius: 4px 4px 0 0;
	background-image: url(pattern.png);
	font-weight: bold;
	white-space: nowrap;
}
.tab {display: inline-block; list-style: none;}
.tab a {display: block; padding: 0 2px 0 2px; line-height: 2em;}
.tab a:hover {color: #0C9;}
.tab.active {padding-top: 5px; border-radius: 40px 4px 40px 4px; background-image: url(130-186-215.png);}
.tab a.active {color: #555;}
.tab_view .panel_view { padding: 10px;}
.panel_view {margin-bottom: 10px;}

/*View Content*/
.view_left{float: left;width: 580px;}
.view_right{
	float: right;
	margin-left: 10px;
	width: 250px;
	height: 600px;
	background-color: rgba(0,91,90,.1);
	border-radius: 4px;
}
.album{float: left; width: 100%;}
.album .photo {
  	float: left; 
  	margin: 5px;
  	text-align: center;
 	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.album .photo .photo_image {
  	width: 174px; 
  	height: 174px;
  	overflow: hidden; 
  	margin: 4px;
}
.photo_image img{border-radius: 0 !important; width: 174px; height: 174px;}
.album .caption {
  border-top: 1px dashed #FFFFFF;
  color: #F90;
  font-weight:bold;
  text-align:center; 
  padding-top: 7px; 
  padding-bottom:7px;
}
.friend_box{float: left; width: 280px; margin: 0 5px 10px 0;}
.friend_box img{float: left; margin-right: 5px;}
.friend_info{float: left; margin-right: 5px; width: 165px;}
.friend_name{font-size: 16px; font-weight: bold; width: 165px; height: 19px; overflow: hidden;}
.friend_note{color: #5B5670; width: 165px; height: 46px; padding-bottom: 7px; overflow: hidden;}
.div_title{float: left; width: 580px; border-bottom: 1px solid rgba(0, 62, 98, .1); padding-bottom: 5px; font-size: 12px;}
.div_title2, .div_title3{float: left; width: 570px; border-radius: 4px; border-bottom: 1px solid rgba(0 , 62, 98, .1); padding: 5px; color: #649; font-weight: bold; background-color: rgba(0, 62, 98, .1);}
.div_title2{margin-bottom: 5px;}
.div_title3{margin: 10px 0;}
a.button{
	float: left;
	display: block;
	font-weight: bold;
	line-height: 18px;
	padding: 4px;
	margin-right: 3px;
	background-image: url(button.png);
	border: 1px solid #555;
	border-radius: 8px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 
				0 0 0 1px rgba(255, 255, 255, .2) inset, 
				0 1px 0 rgba(255, 255, 255, .5);
	color: #FFF;
	text-shadow: 0 -1px 0 #555;
}
a:hover.button{background-image: url(button-hover.png);}
a.icon{
	float: right;
	display: block;
	font-weight: bold;
	line-height: 18px;
	padding: 2px;
	margin: 2px 2px 0 0;
	background-color: rgba(34, 0, 182, .1);
	border: 1px solid #555;
	border-radius: 8px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 
				0 0 0 1px rgba(255, 255, 255, .2) inset, 
				0 1px 0 rgba(255, 255, 255, .5);
	color: #FFF;
	text-shadow: 0 -1px 0 #555;
}
a:hover.icon{background-color: rgb(170, 216, 219);}
.add{
	min-width: 16px;
	min-height: 16px;
	background: url(icon/add.png) left center no-repeat;
	text-indent: 18px;
	display: block;
}
.edit{
	min-width: 16px;
	min-height: 16px;
	background: url(icon/edit.png) left center no-repeat;
	text-indent: 18px;
	display: block;
}
.delete{
	min-width: 16px;
	min-height: 16px;
	background: url(icon/edit.png) left center no-repeat;
	text-indent: 20px;
	display: block;
}
.ol_box{margin: 0; padding: 0; clear: both; list-style: none; width: 100%;}
.li_box{
	display: table;
    table-layout: fixed;
    word-wrap: normal;
	border-bottom: 1px solid rgba(0,62,98,.1);
	padding: 5px 0;
}
.li_box:hover{background-color: rgba(0,128,160,.1); border-radius: 4px;}
.li_box div{display: table-cell; vertical-align: middle; }
.avatar{width: 50px;}
.title_box{width: 520px; padding: 0 5px;overflow: hidden;}
.title_name{float: left; max-height: 39px; overflow: hidden;}
.title_name2{ 
	float: left;
	max-height: 38px;
	max-width: 350px;
	overflow: hidden;
}
.title_name3{ 
	float: left;
	max-height: 38px;
	max-width: 450px;
	overflow: hidden;
}
.title_name>a, .title_name2>a, .title_name3>a{font-size: 16px;}
.title_left{
	clear: both;
	float: left;
	font-size: 11px;
	max-width: 250px;
	max-height: 30px;
	margin-top: 5px;
	overflow: hidden;
}
.title_right{
	float: right;
	text-align: right;
	font-size: 11px;
	max-width: 250px;
	max-height: 30px;
	margin-top: 5px;
	overflow: hidden;
}
.title_right>a{margin-right: 10px;}
.title_info{float: right; width: 100%; max-height: 32px; overflow: hidden;}
.li_content, .li_footer{width: 580px; overflow: hidden;}
.li_content{margin: 1px 0;}
.table_left{float: left; margin-right: 4px;}
.table_right{float: right; margin-left: 4px;}
.table_container {display: table;}
.table_container .table_cell {display: table-cell; vertical-align: top;}
.table_cell .table_box{width: 284px; border-radius: 4px; border: 1px solid rgba(0 , 62, 98, .1); margin-bottom: 5px;}
.table_main1{background-color: rgba(0, 62, 98, .1); border-radius: 4px 4px 0 0; border-bottom: 1px solid rgba(0 , 62, 98, .1); width: 100%; line-height: 2em; color: #649; font-weight: bold;}
.table_main2{width: 100%; vertical-align: top; padding: 5px 0;}
.table_main3{width: 100%; vertical-align: top; padding: 5px 0; border-top: 1px solid rgba(0 , 62, 98, .1);}
.table_info{display: table-cell; vertical-align: top;  padding: 0 4px;}
.table_title{color: #333; font-weight: bold;}
.table_content{font-weight: bold;}
.table_note{font-size: 11px;}
.table_button{float: right;}
.div_comment{
	clear:both;
	float:left;
	width:570px;
	background-color: rgba(0,91,90,.1);
	padding: 5px;
	margin: 1px 0;
	border-radius: 4px;
}
.a_img{float: left; margin-right: 5px; max-width: 123px;}
.comment_1{float: right; min-height: 32px; width: 533px;}
.comment_2{float: right; min-height: 105px; width: 400px;}
.c_bottom{text-align: right; margin-top: 5px;}
.upload_left{float: left; width: 450px;}
.upload_right{clear: both; float: right; width: 100%; margin-top: 5px;}
.upload_img{float: right; width: 68px;}
.upload_img>img{float: left; margin: 0 0 5px 10px;}
.upload_permission{float: left; min-width: 250px; max-width: 400px; padding: 1px; overflow: hidden;}
.upload_button{float: right;}
.per_select{float: right;}
.font1{color: #666;}
.font2{color: #5B5670;}
.font3{color: #66F;}
.font4{color: #69B;}
/*table*/
.div_left, .div_right{
	display: table-cell;
	vertical-align: middle;
}
.div_left{float: left; margin-right: 10px;}
.div_right{float: right;}
/*Form*/
form {
	font-family: "Tahoma", "Geneva", sans-serif;
	color: #333;
	padding: 10px;
}
fieldset {
	border: 1px solid #929292;
	padding: 0;
	padding-left: -1px;
	border-radius: 5px;
}
legend {
	font-size: 1.5em;
	color: #333;
	font-weight: bold;
	margin-left: 110px;
	padding: 5px 10px;
	border: 1px solid #929292;
	border-radius: 5px;
	text-transform: capitalize;
}
form p {
	padding: 5px 0;
	position: relative;
}
form p:after {
	content: "☉";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
label {
	float: left;
	text-transform: capitalize;
	line-height: 2em;
}
p.nolabel input[type=text], p.nolabel textarea, p.nolabel input[type=password] {position: relative; left: 0;}
input[type=text], textarea, input[type=password]{
	border: none;
	width: 200px;
	border-radius: 5px;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
}
input[type=text], textarea, input[type=password]{color: #333; padding: 8px; vertical-align: text-top;}
textarea {
	min-height: 60px;
	min-width: 450px;
	max-width: 450px;
	resize: both;
	overflow: hidden;
}
button, input[type=button], input[type=submit] {
	font-weight: bold;
	line-height: 18px;
	padding: 4px;
	background-image: url(button.png);
	background-color: rgba(75, 113, 255, .1);
	border: 1px solid #555;
	border-radius: 8px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 
				0 0 0 1px rgba(255, 255, 255, 0.2) inset, 
				0 1px 0 rgba(255, 255, 255, 0.5);
	color: #FFF;
	text-shadow: 0 -1px 0 #555;
}
button:hover, input[type=button]:hover, input[type=submit]:hover{background-image: url(button-hover.png);}
input[type=text]:hover, input[type=password]:hover, textarea:hover, input[type=radio]:hover:before, input[type=checkbox]:hover:before, select:hover {		
	-webkit-box-shadow: #09A 0 0 5px;
	-moz-box-shadow: #09A 0 0 5px;
	box-shadow: #09A 0 0 5px;
	cursor: pointer;
}
@-webkit-keyframes pulse {
	0% {		
		-webkit-box-shadow: #09A 0 0 5px;
		-moz-box-shadow: #09A 0 0 5px;
		box-shadow: #09A 0 0 5px;
	}
	100% {
		-webkit-box-shadow: #07A 0 0 10px;
		box-shadow: #07A 0 0 10px;
		-moz-box-shadow: #07A 0 0 10px;
	}
}
input[type=text]:focus, input[type=password]:focus, textarea:focus, input[type=submit]:focus, button:focus, input[type=radio]:focus:before, .radioreplacement:focus, input[type=checkbox]:focus:before, .checkboxreplacement:focus{
	outline: none;		
	-webkit-box-shadow: #09A 0 0 5px;
	-moz-box-shadow: #09A 0 0 5px;
	box-shadow: #09A 0 0 5px;
	-webkit-animation-name: pulse;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 9999;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: linear;
}
input[type=submit]:active button:active {margin: 1px;}
input[type=radio]:before, .radioreplacement {
	display: block;
	height: 14px;
	width: 14px;
	border-radius: 7px;
	content: " ";
	text-align: center;
	position: relative;
	z-index: 999;
	border: 1px solid #929292;
	color: #505050;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));  
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
}
input[type=radio]:checked:before {
	content: "☉";
}
input[type=checkbox]:before, .checkboxreplacement {
	display: block;
	height: 14px;
	width: 14px;
	border-radius: 3px;
	content: " ";
	text-align: center;
	position: relative;
	z-index: 999;
	border: 1px solid #929292;
	color: #505050;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));  
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
}
input[type=checkbox]:checked:before {
	content: "✓";
}
.radioreplacement, .checkboxreplacement {vertical-align: top;}
.checkboxreplacement {text-indent: -9999px;}
.checkboxreplacement.checked {text-indent: 0!important;}
input[type=checkbox], input[type=radio] {outline: none;}
select{
	outline: none;
	border: 1px solid #929292;
	border-radius: 3px;
	color: #505050;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));  
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
	margin: 3px 0;
}
option{background: #FFF;}
